<template >
	<button :class="['button',animation,type]"> 
		<slot/>
	</button>
</template>
<script setup>
	const props = defineProps({
		type: {
			type: String,
			default: "primary"
		},
		animation: {
			type: String,
			default: ""
		}
	})
</script>
<style scoped>
.button{
	padding: 5px 16px;
	color: #000000d9;
	border: 1px solid #d9d9d9;
	background-color: transparent;
	border-radius: 2px;
	line-height: 1.4;
	box-shadow: 0 2px #00000004;
	cursor: pointer;
	transform: scale(1);
	animation: jump 0s;
	transition: .3s;
}
body:hover .button{
	animation-duration: 1s;
}
.button:active{
	filter: brightness(.9);
	animation: none;
}
.rubberBand{
	animation: rubberBand 0s;
}
.primary:hover {
	color: royalblue;
	border-color: royalblue;
}
.success:hover {
	color: #67c23a;
	border-color: #67c23a;
}
.warning:hover {
	color: #e6a23c;
	border-color: #e6a23c;
}
.danger:hover {
	color: #f56c6c;
	border-color: #f56c6c;
}

@keyframes rubberBand {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	30% {
		-webkit-transform: scale3d(1.25,.75,1);
		transform: scale3d(1.25,.75,1)
	}

	40% {
		-webkit-transform: scale3d(.75,1.25,1);
		transform: scale3d(.75,1.25,1)
	}

	50% {
		-webkit-transform: scale3d(1.15,.85,1);
		transform: scale3d(1.15,.85,1)
	}

	65% {
		-webkit-transform: scale3d(.95,1.05,1);
		transform: scale3d(.95,1.05,1)
	}

	75% {
		-webkit-transform: scale3d(1.05,.95,1);
		transform: scale3d(1.05,.95,1)
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}
</style>